<%@ page import="static com.test.ws.s1.utils.Res.fileUrl" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: M1523
  Date: 2025/3/20
  Time: 11:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"  %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>顽石旅游网-搜索</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" href="css/search.css">
    <script src="js/jquery-3.3.1.js"></script>
  	<style type="text/css">
  		.topbar{position:relative}
    	.hottel{position:absolute;top:12px;right:50px}
    	.hottel p{cursor:pointer;font-weight:700;float:left;width:100px;border:1px solid orange;text-align:center;height:45px;line-height:45px;margin-right:10px}
    	.hottel a{color:#666;text-decoration:none}


        #avatar {
            width: 60px; /* 调整宽度 */
            height: 60px; /* 调整高度 */
            border-radius: 50%; /* 使图片变成圆形 */
            border: 2px solid #ccc; /* 改变边框颜色 */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 改变阴影效果 */
            transition: transform 0.2s; /* 添加过渡效果 */
            margin-top: -20px; /* 向上移动15px */
        }

        #avatar:hover {
            transform: scale(1.1); /* 鼠标悬停时放大 */
        }
  	</style>
</head>
<body>
<!--引入头部-->
    <header id="header">
            
        <div class="header_wrap">
            <div class="topbar">
                <div class="logo">
                    <a href="/"><img src="images/logo.png" style="height: 60px;" alt=""></a>
                </div>
                <div class="search">
                    <form action="${pageContext.request.contextPath}/search">
                        <input name="action" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off" value="">
                        <input type="submit" name="" value="搜索"  class="search-button">
                    </form>
                </div>

            </div>
        </div>
    </header>
    <div class="page_one">
        <div class="contant">
            <div class="crumbs">
                <img src="images/search.png" alt="">
                <p>顽石旅行><span>搜索结果</span></p>
            </div>
            <div class="xinxi clearfix">
                <div class="left">
                    <div class="header">
                        <span>商品信息</span>
                        <span class="jg">价格</span>
                    </div>
                    <ul>
                        <c:forEach items="${xianluSouSuo}" var="xianluSouSuo">
                            <li>
                                <div class="img"><img src="<%=fileUrl%>${xianluSouSuo.route_img}" alt="" width=290px" height="150px"></div>
                                <div class="text1">
                                    <p>【尾单特卖】${xianluSouSuo.route_name}</p>
                                    <br/>
                                    <p>随时出发，网付立享￥${xianluSouSuo.route_price}/1人起！爆款位置有限，抢完即止！</p>
                                </div>
                                <div class="price">
                                    <p class="price_num">
                                        <span>&yen;</span>
                                        <span>${xianluSouSuo.route_price}</span>
                                        <span>起</span>
                                    </p>
                                    <p><a href="${pageContext.request.contextPath}/classIfChassa?id=${xianluSouSuo.route_id}">查看详情</a></p>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                    <div class="page_num_inf">
                        <i></i> 共
                        <span>12</span>页<span>132</span>条
                    </div>
                    <div class="pageNum">
                        <ul>
                            <li><a href="">首页</a></li>
                            <li class="threeword"><a href="#">上一页</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">6</a></li>
                            <li><a href="#">7</a></li>
                            <li><a href="#">8</a></li>
                            <li><a href="#">9</a></li>
                            <li><a href="#">10</a></li>
                            <li class="threeword"><a href="javascript:;">下一页</a></li>
                            <li class="threeword"><a href="javascript:;">末页</a></li>
                        </ul>
                    </div>
                </div>
                <div class="right">
                    <div class="top">
                        <div class="hot">HOT</div>
                        <span>热门推荐</span>
                    </div>
                    <ul>
                        <li>
                            <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                            <div class="right">
                                <p>清远新银盏温泉度假村酒店/自由行套...</p>
                                <p>网付价<span>&yen;<span>899</span>起</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                            <div class="right">
                                <p>清远新银盏温泉度假村酒店/自由行套...</p>
                                <p>网付价<span>&yen;<span>899</span>起</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                            <div class="right">
                                <p>清远新银盏温泉度假村酒店/自由行套...</p>
                                <p>网付价<span>&yen;<span>899</span>起</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                            <div class="right">
                                <p>清远新银盏温泉度假村酒店/自由行套...</p>
                                <p>网付价<span>&yen;<span>899</span>起</span>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                            <div class="right">
                                <p>清远新银盏温泉度假村酒店/自由行套...</p>
                                <p>网付价<span>&yen;<span>899</span>起</span>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!--引入头部-->
    <!-- 尾部 start-->
    <footer id="footer">
        
        <div class="company">
            <p>顽石教育有限公司 版权所有Copyright 2019-2020, All Rights Reserved 京ICP备12390</p>
        </div>
    </footer>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="js/include.js"></script>
</body>

</html>